]
<template>
  <tm-modal
      :mask="true"
      splitBtn
      :overlayClick="false"
      ref="modal"
      color="grey-5"
      :height="940"
      :width="700"
      :border="0"
      :padding="[0, 0]"
      text
      linear="bottom"
      title="新增收货地址"
      okText="保存地址"
      @cancel="onClose(false)"
      :before-close="beforeClose"
      v-model:show="modalCtr.show"


  >
    <tm-form ref="formRef" :modelValue="formState" layout="vertical" :margin="ItemMargin" :padding="[12, 12]" :label-width="160">
      <view style="display: flex; justify-content: space-between;margin-top: -20rpx">
        <view style="width: 50%">
          <tm-form-item required label="收货人姓名" field="name" :rules="rules.name" :margin="[12, 12]" :border="false" layout="vertical" :padding="ItemMargin">
            <tm-input :fontSize="modalCtr.fontSize" v-model="formState.name" placeholder="请设置收货人姓名" :maxlength="10"/>
          </tm-form-item>
        </view>

        <view style="width: 50%">
          <tm-form-item required field="mobile" :rules="rules.mobile" label="收货人手机号" :margin="[12, 12]" :border="false">
            <tm-input type="number" :fontSize="modalCtr.fontSize" v-model="formState.mobile" placeholder="请设置收货手机号码"/>
          </tm-form-item>
        </view>
      </view>
      <tm-form-item required label="所在地区" field="city" :rules="rules.city" :border="false" style="margin-top: -15rpx">
        <tm-input @click="openCitySelector" :readonly="true" v-model="formState.city" :fontSize="modalCtr.fontSize" placeholder="请选择所在地区地址"/>
      </tm-form-item>

      <tm-form-item label="详细地址" field="detail" required :rules="rules.detail" style="margin-top: -15rpx" :border="false">
        <tm-input :fontSize="modalCtr.fontSize" :height="130" type="textarea" v-model="formState.detail" placeholder="请设置收货人详细地址 街道/小区/门牌号等"/>
      </tm-form-item>
    </tm-form>
  </tm-modal>
  <tm-city-picker okText=" " selectedModel="name" v-model:show="cityCtr.show" v-model="cityCtr.data" @cancel="onCityCancel" @update:modelValue="onCityClose"/>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import {addAddress} from '@/apis';


const ItemMargin = [0, 0];
const props = defineProps({
  Record: {
    type: Object,
    require: true
  }
})
const emit = defineEmits(['close']);
const formRef = ref(null);
const modalCtr = reactive({
  show: true,
  fontSize: 26
});

const cityCtr = reactive({
  show: false,
  data: []
});

const openCitySelector = () => {
  cityCtr.show = true;
  modalCtr.show = false;
};

const onCityClose = (e: any) => {
  formState.city = e.join('/');
  cityCtr.show = false;
  modalCtr.show = true;
};
const onCityCancel = () => {
  cityCtr.show = false;
  modalCtr.show = true;
};

const formState = reactive({
  name: '',
  mobile: '',
  city: '',
  detail: ''
});

const rules = {
  name: [
    {required: true, message: '收货人姓名不能为空'},
    {required: true, validator: (val: string) => val.length >= 2 && val.length <= 10, message: '长度请设置在2至10个字符以内'}
  ],

  mobile: [
    {required: true, message: '手机号码不能为空'},
    {required: true, message: '手机号码格式不正确', validator: (val: string) => uni.$tm.u.isPhone(val)}
  ],
  city: [{required: true, message: '请选择所在地区'}],

  detail: [
    {required: true, message: '详细地址不能为空'},
    {required: true, message: '不能超过100个字符', validator: (val: string) => val.length <= 100}
  ]
};



const onClose =(data:boolean | object)=>{
  emit('close' ,data)
}


const beforeClose = async () => {
  // @ts-ignore
  formRef.value.submit()
  // @ts-ignore
  const {isPass} = await formRef.value.validate();
  if (!isPass) return isPass;
  const arr = formState.city.split("/");

  const reqData = {
    name: formState.name,
    mobile: formState.mobile,
    province: arr[0],
    city: arr[1],
    district: arr[2],
    address: formState.detail,
    dfFlag: false
  }


  const {code, data, message} = await addAddress(reqData);
  if (code == 0) {
    await uni.showToast({title: '添加成功！'})
    onClose(reqData)
  }

  return false;
};


</script>
